<template>
  <div class="news-page">
    <div class="page-header">
      <div class="container">
        <h1>新闻资讯</h1>
        <p>了解最新的行业动态和公司新闻</p>
      </div>
    </div>

    <div class="container" style="margin-top: 80px; padding-bottom: 80px">
      <div class="news-list">
        <div
          v-for="news in newsList"
          :key="news.id"
          class="news-item card"
          @click="$router.push(`/news/${news.id}`)"
        >
          <img v-if="news.cover_image" :src="news.cover_image" :alt="news.title" />
          <div class="news-content">
            <h3>{{ news.title }}</h3>
            <p>{{ news.summary }}</p>
            <div class="news-meta">
              <span>{{ news.publish_time?.split('T')[0] }}</span>
              <span>作者: {{ news.author || '未知' }}</span>
              <span>浏览 {{ news.view_count }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="fetchNews"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getNewsList } from '@/api/portal'
import type { News } from '@/types'

const newsList = ref<News[]>([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const fetchNews = async () => {
  try {
    const res = await getNewsList({ page: page.value, page_size: pageSize.value })
    newsList.value = res.data.items
    total.value = res.data.total
  } catch (error) {
    console.error('获取新闻列表失败', error)
  }
}

onMounted(() => {
  fetchNews()
})
</script>

<style scoped lang="scss">
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 100px 0 60px;
  margin-top: 70px;
  text-align: center;

  h1 {
    font-size: 42px;
    margin-bottom: 16px;
  }

  p {
    font-size: 18px;
    opacity: 0.9;
  }
}

.news-item {
  display: flex;
  gap: 24px;
  cursor: pointer;
  margin-bottom: 24px;

  img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .news-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    h3 {
      font-size: 22px;
      margin-bottom: 12px;
    }

    p {
      color: var(--text-secondary);
      line-height: 1.8;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .news-meta {
      display: flex;
      gap: 24px;
      color: var(--text-tertiary);
      font-size: 14px;
      margin-top: 16px;
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .news-item {
    flex-direction: column;

    img {
      width: 100%;
    }
  }
}
</style>

